﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Games || 劲松</title>
    <div th:include="Common/common :: head"></div>
    <script type="text/javascript">
        $(function (){
            $("#search").click(function (){
                var text=$("#searchtext").attr("value");
                location.href="http://localhost:8080/search?gamename="+text;
            });
            $("#searchtext").change(function (){
                $(this).attr("value",this.value);
            })

        });
    </script>
</head>

<body>

<div id="main-wrapper">

    <!--Header section start-->
    <div th:include="Common/common :: header"></div>
    <!--Header section end-->

    <!--Page Banner Area Start-->
    <div class="page-banner-area" style="background-image: url(assets/images/bg/page-bg.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-content text-center">
                        <h1>KINGS OF THE <br> WARRIORS</h1>
                        <a class="df-btn" href="#">Buy now</a>
                        <ul class="page-breadcrumb">
                            <li><a href="index1.html">Home</a></li>
                            <li>Games</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Area End-->

    <!--Games Area Start-->
    <div class="games-area section pt-85 pt-lg-65 pt-md-55 pt-sm-55 pt-xs-45">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!--Game Toolbar Start-->
                    <div class="game-topbar-wrapper d-md-flex justify-content-md-between align-items-center">
                        <div class="game-search-box">
                            <h3>游戏搜索</h3>
                                <input type="text" name="game_search" placeholder="输入您想要查询的游戏" id="searchtext" >
                                <button id="search" type="submit"><i class="icofont-search-2"></i></button>
                        </div>
                        <!--Toolbar Short Area Start-->
                        <div class="toolbar-short-area d-md-flex align-items-center">
                            <div class="toolbar-shorter">
                                <h3>种类</h3>
                                <div class="dropdown">
                                    <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false">
                                        按种类排序
                                    </button>
                                    <div class="dropdown-menu"  aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" th:href="@{/games}">动作</a>
                                        <a class="dropdown-item" th:href="@{/games}">横板</a>
                                        <a class="dropdown-item" th:href="@{/games}">射击</a>
                                        <a class="dropdown-item" th:href="@{/games}">剧情</a>
                                        <a class="dropdown-item" th:href="@{/games}">冒险</a>
                                    </div>
                                </div>
                            </div>
                            <div class="toolbar-shorter">
                                <h3>价格</h3>
                            <div class="dropdown">
                                <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-expanded="false">
                                    按价格排序
                                </button>
                                <div class="dropdown-menu"  aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" th:href="@{/games(price=asc)}">价格从低到高↑</a>
                                    <a class="dropdown-item" th:href="@{/games(price=desc)}">价格从高到低↓</a>
                                </div>
                            </div>
                            </div>
                        </div>
                        <!--Toolbar Short Area End-->
                    </div>
                    <!--Game Toolbar End-->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6" th:each="games:${pages.getList()}">
                    <!--Single Game Start-->
                    <div class="single-game mb-50">
                        <div class="game-img">
                            <a th:href="@{/gamesdetails(id=${games.getId()})}"><img src="assets/images/game/game1.jpg"
                                                                                    th:src="@{${games.image}}"
                                                                                    alt=""></a>
                        </div>
                        <div class="game-content">
                            <h4 class="link-arrow"><a th:href="@{/gamesdetails(id=${games.getId()})}" href=""
                                   th:text="${games.getGamename()}"></a>
                            </h4>
                            <span th:text="${games.getPlatform()}"></span><br>
                            <p align="center">
                                <span th:text="价格+':'+${games.getPrice()}+元"></span></p>
                        </div>
                        <span th:text="View+':'+${games.viewcount}" style="color: blue"></span>
                    </div>
                    <!--Single Game End-->
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="blog-pagination text-center">
                        <ul class="page-pagination">
                            <li><a href="#" th:href="@{/games(pn=${pages.getPrePage()},price=${price})}"><i
                                    class="icofont-long-arrow-left"></i></a></li>
                            <li class="active" th:each="num:${pages.getNavigatepageNums()}">
                                <a th:if="${num==pages.getPageNum()}" href="#" th:text="${num}"
                                   th:href="@{/games(pn=${num},price=${price})}" style="color: red"></a>
                                <a th:if="${num!=pages.getPageNum()}" href="#" th:text="${num}"
                                   th:href="@{/games(pn=${num},price=${price})}"></a>
                            </li>
                            <li><a href="#" th:href="@{/games(pn=${pages.getNextPage()},price=${price})}"><i
                                    class="icofont-long-arrow-right"></i></a></li>
                        </ul>
                        <p th:text="当前+${pages.getPageNum()}+页+','+总共+${pages.getPages()}+页+','+总+${pages.getTotal()}+条记录"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Games Area End-->

    <!--Projects section start-->
    <div class="newslatter-section newslatter-section-tow section pt-xs-50 pb-xs-50">
        <div class="container">

            <div class="row">
                <div class="col-12">
                    <!--News Latter Area Start-->
                    <div class="news-latter-area newslatter-black">
                        <div class="news-latter-box">
                            <h3>订阅我们的时事通讯，获取所有信息 <br> 最新消息、更新、视频和优惠</h3>
                            <form action="#">
                                <input type="text" placeholder="Enter your email here">
                            </form>
                        </div>
                    </div>
                    <!--News Latter Area End-->
                </div>
            </div>

        </div>

    </div>
    <!--Projects section end-->

    <!--Footer section start-->
    <footer class="footer-section style-2 section bg-theme"
            style="background-image: url(assets/images/bg/footer-bg.jpg)">

        <!--Footer Top start-->
        <div class="footer-top section pt-175 pt-lg-150 pt-md-125 pt-sm-110 pt-xs-40 pb-80 pb-lg-70 pb-md-60 pb-sm-15 pb-xs-40">
            <div class="container container-1520">
                <div class="row justify-content-lg-between">

                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-2 col-md-3">
                        <div class="footer-widget">
                            <div class="footer-logo">
                                <a href="index1.html"><img src="assets/images/logo.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->

                    <!--Footer Widget start-->
                    <div class="col-xl-6 col-lg-6 col-md-9">
                        <div class="footer-widget">
                            <div class="footer-nav">
                                <nav>
                                    <ul>
                                        <li><a href="#">forums</a></li>
                                        <li><a href="#">demo</a></li>
                                        <li><a href="#">support</a></li>
                                        <li><a href="#">terms & conditions</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->

                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-4 col-md-12">
                        <div class="footer-widget">
                            <div class="footer-social">
                                <span>follow us:</span>
                                <ul>
                                    <li><a href="#"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="#"><i class="icofont-twitter"></i></a></li>
                                    <li><a href="#"><i class="icofont-instagram"></i></a></li>
                                    <li><a href="#"><i class="icofont-youtube-play"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->

                </div>
            </div>
        </div>
        <!--Footer Top end-->

        <!--Footer bottom start-->
        <div class="footer-bottom border-color section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="copyright text-center">
                            <p>Copyright &copy;2018 <a href="http://www.genban.org">Gilbard</a>. All rights reserved.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer bottom end-->

    </footer>
    <!--Footer section end-->

</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<div th:include="Common/common :: laster"></div>
</body>

</html>